<template>
  <!-- 上传 -->
  <!-- 核心属性：
          action： 上传地址
          headers: 上传请求头
          name： 上传文件的字段名称
          on-success：上传成功时候
         -->
  <!-- <el-upload
          name="file"
          :headers="{'x-token':xtoken}"
          action="http://124.223.14.236:8060/admin/common/upload?type=images"
          :on-success="onSuccess"
          list-type="picture-card"
        >
          <i class="el-icon-plus" />
        </el-upload> -->
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
      :on-remove="onRemove"
      :on-preview="onPreview"
      :file-list="fileList"
      :class="{disabled:fileList.length===1}"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog append-to-body title="预览图片" :visible.sync="showDialog">
      <img :src="imgUrl" alt="">
    </el-dialog>
  </div>

</template>
<script>
import { upload } from '@/api/hujingbo/activity'
export default {
  name: 'UploadImage',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // xtoken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyaW5mbyI6eyJpZCI6IjEiLCJsb2dpbl9uYW1lIjoiYWRtaW4iLCJwYXNzd29yZCI6Ijk2ZTc5MjE4OTY1ZWI3MmM5MmE1NDlkZDVhMzMwMTEyIiwibmFtZSI6IlRoaW5rSlPkuIDlk6UiLCJlbWFpbCI6Imhld3UxMTIyQDE2My5jb20iLCJwaG9uZSI6IjE3MzQyMDY1OTA5IiwibG9naW5faXAiOiI6OjEiLCJsb2dpbl9kYXRlIjoiMjAxOC0wMS0wOCAxNjoyMjo1MSIsImNyZWF0ZV9kYXRlIjoiMjAxNy0xMi0xNCAxMTo1Mjo0NiIsInVwZGF0ZV9kYXRlIjoiMjAyMy0wNC0yNSAyMjowMDoxNiIsImRlbF9mbGFnIjoiMCIsInJvbGVfaWQiOlsiMWM1NGUwMDNjMWZjNGRjZDliMDg3ZWY4ZDQ4YWJhYzMiLCI2ZTY3YzM4MC1lMWNlLTExZWQtOTBmMi1kZDY1MTc0OWMzODciLCJkNmYwZWZmMC1lMzcwLTExZWQtYWU4OC0xZDcyNDRiMDllMmEiXSwic3RhdHVzIjoxLCJkZWZhdWx0X2RhdGEiOiIxIiwicm9sZW5hbWUiOlsi6LaF57qn566h55CG5ZGYIiwi54mb6YC855qE566h55CG5ZGYIiwiZHdhIl19LCJpYXQiOjE2ODI0ODkxODJ9.pEIwUNrFKmdOmdzfLY9ntxNYhTRDptWNX7cU1Fes97A',
      fileList: [],
      imgUrl: '',
      showDialog: false
    }
  },
  watch: {
    value: {
      handler() {
        this.fileList = this.value ? [{ url: this.value.split(',').map(item => {
          return this.$webURL + item
        })[0] }] : []
      },
      immediate: true // 一开始就执行
    }
  },
  methods: {
    // 上传成功
    // onSuccess(val) {
    //   console.log(val)
    // },
    // 自定义上传
    async httpRequest({ file }) {
    // 1. 实例fd
      const fd = new FormData()
      // 2. 注入文件信息
      fd.append('file', file)
      // 3. 发生请求
      const res = await upload(fd) // 传入fd实例
      // 4. 将服务器返回的存储地址给图片字段
      // 数据传递给外面
      this.$emit('input', res.data.url)
      // 5. 将本地图片地址替换成线上地址
      this.fileList = [{ url: this.$webURL + res.data.url }]
    },
    // 图片移除
    onRemove() {
      this.fileList = []
      this.$emit('input', '')
    },
    // 预览
    onPreview(val) {
      this.imgUrl = val.url
      this.showDialog = true
    },
    // 上传前
    beforeUpload(file) {
    // 检查大小  1G = 1024MB  1MB = 1024KB   1kb = 1024b
      if ((file.size / 1024 / 1024) > 2) {
        this.$message.warning('体积不允许超过2M')
        return false
      }
      // 检查类型
      const typeList = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif']
      if (!typeList.includes(file.type)) {
        this.$message.warning('格式不正确')
        return false
      }
      // 通过了
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled{
  ::v-deep .el-upload--picture-card{
    display: none;
  }
}
</style>
